
<template>
    <div>
        <van-nav-bar title="股票列表" right-text="搜索" @click-right="onStatistic"></van-nav-bar>
        <van-cell title="计算日期" :value="cal_date" @click="cal_show = true" />
        <van-calendar v-model:show="cal_show" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate" />
        <div style="margin-bottom:55px">
            <van-tabs v-model:active="statisticTabActiveName">
                <van-tab title="买入" name="buy">
                    <div v-for="item in stocks_statistic.buy" :key="item" style="margin:5px">
                        <van-row justify="space-around" align="center" style="background:white;border-radius:10px">
                            <van-col span="12"><p> {{ item.stock }} </p></van-col>
                            <van-col span="5"><p> {{ stocks_statistic.trade_date }} </p></van-col>
                            <van-col span="7">
                                <van-badge :content="item.count"><van-button plain type="primary" @click="loadStockStrategy(item, 1)">策略列表</van-button></van-badge>
                            </van-col>
                        </van-row>
                    </div>
                </van-tab>
                <van-tab title="卖出" name="sell">
                    <div v-for="item in stocks_statistic.sell" :key="item" style="margin:5px">
                        <van-row justify="space-around" align="center" style="background:white;border-radius:10px">
                            <van-col span="12"><p> {{ item.stock }} </p></van-col>
                            <van-col span="5"><p> {{ stocks_statistic.trade_date }} </p></van-col>
                            <van-col span="7">
                                <van-badge :content="item.count"><van-button plain type="primary" @click="loadStockStrategy(item, -1)">策略列表</van-button></van-badge>
                            </van-col>
                        </van-row>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <van-popup v-model:show="strategy_popup_show" position="left" :style="{ height: '100%',width:'70%' }" >
            <div style="background:#f8f8f8">
                <div v-for="(item, index) in stock_strategys" :key="index" style="margin-top:3px;background:white;border-radius:10px">
                    <van-row justify="space-around" align="center">
                        <van-col span="14"><p style="margin-left:3px"> {{ item.strategy }} </p></van-col>
                        <van-col span="10"><p style="margin-left:3px"> {{ item.ts_code }} </p></van-col>
                    </van-row>
                    <van-row justify="space-around" align="center">
                        <p style="margin-left:3px"> {{ item.condition }} </p>
                    </van-row>
                </div>
            </div>
        </van-popup>
        <van-tabbar route>
            <van-tabbar-item replace to="/strategy" icon="home-o">策略</van-tabbar-item>
            <van-tabbar-item replace to="/stock" icon="search">股票</van-tabbar-item>
            <van-tabbar-item replace to="/backtest" icon="friends-o">回测</van-tabbar-item>
            <van-tabbar-item replace to="/setting" icon="setting-o">管理</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
</script>

<script>
import {
        getStockStrategy,
        getStockTriggerStatistic,
    } from '@/api';
import utils from '../common/utils'
export default {
  data() {
    return {
      cal_date: '',
      cal_show: false,
      minDate: new Date(2021, 0, 1),
      maxDate: new Date(),
      strategys: [{strategy: "双均线", count: 2},{strategy: "单均线",  count: 4}],
      trade_date:"",
      stock_strategys: [{ts_code: "000001_SZ",name:"新"},{ts_code: "000002_SZ",name:"旧"}],
      stocks_statistic: [],
      strategy_popup_show: false,
      statisticTabActiveName: 'buy'
    };
  },

  methods: {
    onStatistic() {
        let _this = this
        let params = {cal_date: this.cal_date}
        getStockTriggerStatistic(params).then(res => {
            // console.info(res.dataset)
            _this.stocks_statistic = res.dataset
        });
    },
    loadStockStrategy(item, orient) {
        let _this = this
        let ts_code = item.ts_code
        let params = {orient:orient, cal_date: this.cal_date}
        getStockStrategy(ts_code, params).then(res => {
            console.info(res.dataset)
            _this.stock_strategys = res.dataset
            _this.strategy_popup_show = true
        });
    },
    onConfirm(value){
        this.cal_show = false
        this.cal_date = utils.dateFormat("YYmmdd", value);
        this.onStatistic()
    }
  },
  mounted:function(){
       let nowDate = new Date()
       this.cal_date = utils.dateFormat("YYmmdd", nowDate)
       this.onStatistic()
  }
};
</script>